<template>
	<view class="">
		<uni-nav-bar :fixed="true" left-icon="back"  :border="false"backgroundColor="#f9f2ea" leftText="发票详情" :statusBar="true" @clickLeft="goBack"></uni-nav-bar>
		<view class="title">
			发票详情
		</view>
		<view class="flex">
			<view class="text">
				抬头类型
			</view>
			<radio-group class="radio" @change="radioChange">
				<label class="radio-item" v-for="(item, index) in raidoList" :key="item.value">
					<view>
						<radio :value="item.value" :checked="item.value === radioChoose" />
					</view>
					<view>{{item.name}}</view>
				</label>
			</radio-group>
		</view>
		<view class="" v-if="radioChoose != 1">
			<view class="flex">
				<view class="text">
					公司名称
				</view>
				<input type="text" v-model="name" placeholder="请输入公司名称" value="" />
			</view>
			<view class="flex">
				<view class="text">
					公司税号
				</view>
				<input type="text" v-model="num" placeholder="请输入公司税号" value="" />
			</view>
		</view>
		<view class="" v-else>
			<view class="flex">
				<view class="text">
					个人抬头
				</view>
				<input type="text" v-model="head" placeholder="请输入个人抬头" value="" />
			</view>
		</view>
		<view class="flex">
			<view class="text">
				总金额
			</view>
			<view class="">
				{{total + "元 共" + receiptList.length + "张"}}
			</view>
		</view>
		<view class="title">
			接收方式
		</view>
		<view class="flex">
			<view class="text">
				电子邮箱
			</view>
			<input type="text" v-model="email" placeholder="请输入电子邮箱" value="" />
		</view>
		<view class="btn-group flex">
			<view class="btn buy" @click="openReceipt()">
				开票
			</view>
		</view>
	</view>
</template>

<script>
	import { openInvoice } from "@/api/public.js"
	export default {
		data(){
			return {
				radioChoose: 2,
				raidoList: [{
						value: 2,
						name: "企业单位"
				},{
						value: 1,
						name: "个人"
				}],
				receiptList: [],
				name: "",
				num: "",
				head: "",
				email: "",
				total: "",
			}
		},
		onLoad(obj){
			this.receiptList = JSON.parse(decodeURIComponent(obj.data));
			let number = 0;
			for(let i in this.receiptList){
				number += this.receiptList[i].price * 100;
			}
			this.total = (number / 100).toFixed(2);
		},
		methods: {
			goBack(){
				uni.navigateBack();
			},
			radioChange: function(evt) {
				for (let i = 0; i < this.raidoList.length; i++) {
				console.log(evt.target.value, this.raidoList[i].value)
					if (this.raidoList[i].value == evt.target.value) {
						this.radioChoose = this.raidoList[i].value;
						console.log(this.radioChoose)
						break;
					}
				}
			},
			openReceipt(){
				let arr = [];
				for(let i in this.receiptList){
					arr.push(this.receiptList[i].id)
				}
				if(this.email == ""){
					uni.showToast({
						title: "请输入邮箱",
						icon: "none"
					})
					return false
				}
				if(this.radioChoose == 2){
					if(this.name == ""){
						uni.showToast({
							title: "请输入公司名称",
							icon: "none"
						})
						return false
					}
					if(this.num == ""){
						uni.showToast({
							title: "请输入税号",
							icon: "none"
						})
						return false
					}
					openInvoice(this.radioChoose, "", this.name, this.num, "", "", "", "", this.email, JSON.stringify(arr)).then(res=>{
						if(res.result == 0){
							uni.showToast({
								title: "开票成功",
								icon: "none"
							})
							uni.navigateBack()
						}
					})
				}else{
					if(this.head == ""){
						uni.showToast({
							title: "请输入个人抬头",
							icon: "none"
						})
						return false
					}
					openInvoice(this.radioChoose, this.head, "", "", "", "", "", "", this.email, JSON.stringify(arr)).then(res=>{
						if(res.result == 0){
							uni.showToast({
								title: "开票成功",
								icon: "none"
							})
							uni.navigateBack()
						}
					})
				}
			},
		},
		
	}
</script>

<style lang="scss" scoped>
.flex{
	display: flex;
	background: rgba(255, 250, 245, 1);
	padding: 20rpx 32rpx;
	border-bottom: 2rpx solid #f0f0f0;
	.text{
		margin-right: 30rpx;
	}
}
.title{
	height: 80rpx;
	font-size: 32rpx;
	line-height: 80rpx;
	padding: 0 32rpx;
}
.radio{
	display: flex;
	.radio-item{
		display: flex;
		margin-right: 40rpx;
	}
}
.btn-group{
	box-sizing: border-box;
	position: fixed;
	width: 100%;
	height: 140rpx;
	bottom: 0;
	background: #f9f2ea;
	.btn{
		width: 100%;
		font-size: 30rpx;
		line-height: 100rpx;
		border-radius: 50rpx;
		color: #fff;
		text-align: center;
		&.buy{
			background: rgba(214, 142, 127, 1);
		}
	}
}
</style>
